<script setup>
import Progress from '@/components/Progress.vue'
import FilterBar from '@/components/FilterBar.vue'
import { onMounted, inject, reactive, computed } from 'vue'

const circleWidth = computed(() => {
  return (screen.width / 100) * 4.427
})

const $http = inject('$http')

const dataObj = reactive({
  list: [],
  selectValue: 'day',
})

onMounted(() => {
  getChartData()
})

function getChartData() {
  $http.get('/screen/town/person-enter', { params: { scope: dataObj?.selectValue } }).then(res => {
    const { data = [] } = res || {}

    dataObj.list = data || []
  })
}

function change(item = {}) {
  dataObj.selectValue = item?.value || ''

  getChartData()
}
</script>

<template>
  <div class="leftBottom">
    <div class="title">各乡镇返乡情况</div>

    <FilterBar class="filterBox" :selectValue="dataObj.selectValue" @change="change" />

    <div class="pepBox">
      <div class="pepList scroll">
        <div class="pepItem" v-for="(item, index) in dataObj.list" :key="index">
          <div class="pepProgress">
            <el-progress type="circle" :percentage="item.percent || 0" :width="circleWidth"> </el-progress>

            <Progress style="width: 0; height: 0" />
          </div>

          <div class="nameBox">
            <div class="name">{{ item.label }}</div>
          </div>

          <div class="numbox">
            <span class="num">{{ item.value }}</span
            >人
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.leftBottom {
  margin-top: 16px;
  width: 1112px;
  height: 265px;
  background-image: url('@/assets/returnTown/boxbg3.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;

  .title {
    margin-top: 8px;
    width: 100%;
    height: 20px;
    font-size: 14px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .filterBox {
    margin: 13px 16px 12px 16px;
  }

  .pepBox {
    flex: 1;
    padding: 0 16px;
    display: flex;

    .pepList {
      overflow: auto hidden;
      flex: 1;
      display: flex;
      align-items: center;
      margin-bottom: 24px;

      .pepItem {
        width: 90px;
        margin-bottom: 23px;

        .pepProgress {
          width: 85px;
          height: 85px;
        }

        .pepProgress :deep(.el-progress-circle) {
          // 修改进度条颜色
          svg > path:nth-child(2) {
            stroke: url(#progerss);
          }
        }

        :deep(.el-progress-circle__track) {
          // 修改进度条背景色
          stroke: #2c4a82;
        }

        :deep(.el-progress__text) {
          // 修改进度条文字提示颜色
          color: #3284ec;
        }

        .nameBox {
          margin-top: 8px;
          height: 20px;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;

          .name {
            font-size: 14px;
            font-weight: 400;
            color: #ffffff;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
        }

        .numbox {
          height: 17px;
          font-size: 12px;
          color: #ffffff;
          display: flex;
          justify-content: center;
          align-items: center;

          .num {
            color: #08baf9;
            margin-right: 4px;
          }
        }

        &:not(:first-child) {
          margin-left: 56px;
        }
      }
    }
  }
}
</style>
